<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT	} from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { Img, ImgSystem } from '@eva/plugin-renderer-img'
	import { Mask, MaskSystem, MASK_TYPE } from '@eva/plugin-renderer-mask'
	export default{
		name: 'EvajsStudyShowMask',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.loadResource()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			loadResource(){
				resource.addResource([
					{
						name: 'heart',
						type: RESOURCE_TYPE.IMAGE,
						src: {
							image: {
								type: 'png',
								url: '/images/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png'
							}
						},
						preload: false
					},
					{
						name: 'tag',
						type: RESOURCE_TYPE.SPRITE,
						src: {
							image: {
								type: 'png',
								url: '/images/TB1KcVte4n1gK0jSZKPXXXvUXXa-150-50.png'
							},
							json: {
								type: 'json',
								url: '/json/TB1d4lse4D1gK0jSZFsXXbldVXa.json'
							}
						},
						preload: true
					}
				]);
				resource.preload();
				// 开始loader
				resource.on(LOAD_EVENT.START, e => {
					console.log('开始加载', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.PROGRESS, e => {
					console.log('进度监听', e);
				}); 
				// 某文件加载成功
				resource.on(LOAD_EVENT.LOADED, e => {
					console.log('某文件加载成功', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.COMPLETE, e => {
					console.log('完成', e);
					this.showMask()
				}); 
				// 加载错误
				resource.on(LOAD_EVENT.ERROR, e => {
					console.log('错误', e);
				}); 
			},
			showMask(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 750,
							height: 1000,
							backgroundColor: 0x101010
						}),
						// 游戏精灵系统
						new ImgSystem(),
						new MaskSystem(),
					],
				});
				this.game.scene.transform.size = {
					width: 750,
					height: 1000
				}
				const image = new GameObject('image', {
					size: { width: 200, height: 200 }
				})
				image.addComponent(
					new Img({
						resource: 'heart'
					})
				)
				this.game.scene.addChild(image)
				image.addComponent(
					new Mask({
						type: MASK_TYPE.Circle,
						style: {
							x: 100,
							y: 100,
							radius: 70
						}
					})
				)

				const image1 = new GameObject('image', {
					size: { width: 200, height: 200 },
					position: { x: 400, y: 300 }
				})
				image1.addComponent(
					new Img({
						resource: 'heart'
					})
				)

				image1.addComponent(
					new Mask({
						type: MASK_TYPE.Img,
						style: {
							width: 100,
							height: 100,
							x: 20,
							y: 20
						},
						resource: 'heart'
					})
				)
				this.game.scene.addChild(image1)

				const image2 = new GameObject('image', {
					size: { width: 200, height: 200 },
					position: { x: 100, y: 400 }
				})
				image2.addComponent(
					new Img({
						resource: 'heart'
					})
				)

				image2.addComponent(
					new Mask({
						type: MASK_TYPE.Sprite,
						style: {
							width: 100,
							height: 100,
							x: 20,
							y: 20
						},
						resource: 'tag',
						spriteName: 'donate.png'
					})
				)
				this.game.scene.addChild(image2)
			}
		}
	}
</script>